<template>
    <div>
        <!--表格添加按钮与刷新按钮-->
        <div class="top-div">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="showAddSalaryView">添加工资账套</el-button>
            <el-button type="success" size="small" icon="el-icon-refresh"@click="initSalaryList"/>
        </div>
        <!--展示表格数据-->
        <div>
            <el-table :data="salaryList" size="small" border stripe >
                <el-table-column type="selection" align="center" width="50"/>
                <el-table-column prop="name" align="center" width="150" label="账套名称"/>
                <el-table-column prop="basicSalary" align="center" width="80" label="基本工资"/>
                <el-table-column prop="trafficSalary" align="center" width="80" label="交通补助"/>
                <el-table-column prop="lunchSalary" align="center" width="80" label="午餐补助"/>
                <el-table-column prop="bonus" align="center" width="80" label="奖金"/>
                <el-table-column prop="createDate" align="center" width="120" label="启用时间"/>
                <el-table-column align="center" label="养老金">
                    <el-table-column prop="pensionPer" align="center" width="80" label="比率"/>
                    <el-table-column prop="pensionBase" align="center" width="80" label="基数"/>
                </el-table-column>
                <el-table-column align="center" label="医疗保险">
                    <el-table-column prop="medicalPer" align="center" width="80" label="比率"/>
                    <el-table-column prop="medicalBase" align="center" width="80" label="基数"/>
                </el-table-column>
                <el-table-column align="center" label="公积金">
                    <el-table-column prop="accumulationFundPer" align="center" width="80" label="比率"/>
                    <el-table-column prop="accumulationFundBase" align="center" width="80" label="基数"/>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" @click="editSalary(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="deleteSalary(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--弹出框-->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="40%">
            <div class="addSalaryInput">
                <el-steps direction="vertical" :active="activeIndex" style="width: 500px">
                    <el-step :title="item" v-for="(item,index) in addSalaryNameArr" :key="index"/>
                </el-steps>
                <el-input size="small" v-model="salaryObj[key]" v-show="activeIndex==index" :placeholder="'请输入'+addSalaryNameArr[index]" v-for="(value, key, index) in salaryObj" :key="index"/>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="lastStep">{{activeIndex==0?'取消':'上一步'}}</el-button>
                <el-button size="small" type="primary" @click="nextStep">{{activeIndex==10?'完成':'下一步'}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "SalSob",
        data(){
            return{
                salaryList:[],
                dialogVisible:false,
                dialogTitle:"",
                activeIndex:0,
                //addSalaryNameArr和addSalary顺序一定要保持一致
                addSalaryNameArr:[
                    "基本工资",
                    "交通补助",
                    "午餐补助",
                    "奖金",
                    "养老金比率",
                    "养老金基数",
                    "医疗保险比率",
                    "医疗保险基数",
                    "公积金比率",
                    "公积金基数",
                    "账套名称"
                ],
                salaryObj:{
                    //"基本工资",
                    "basicSalary":0,
                    //"交通补助",
                    "trafficSalary":0,
                    //"午餐补助",
                    "lunchSalary":0,
                    //"奖金",
                    "bonus":0,
                    //"养老金比率",
                    "pensionPer":0,
                    //"养老金基数",
                    "pensionBase":0,
                    //"医疗保险比率",
                    "medicalPer":0,
                    //"医疗保险基数",
                    "medicalBase":0,
                    //"公积金比率",
                    "accumulationFundPer":0,
                    //"公积金基数"
                    "accumulationFundBase":0,
                    //账套名称
                    "name":''
                }
            }
        },
        mounted() {
            this.initSalaryList();
        },
        methods:{
            editSalary(data){
                this.dialogTitle="编辑工资账套";
                this.activeIndex=0;
                // 赋值

                //"基本工资",
                this.salaryObj.basicSalary=data.basicSalary;
                //"交通补助",
                this.salaryObj.trafficSalary=data.trafficSalary;
                //"午餐补助",
                this.salaryObj.lunchSalary=data.lunchSalary;
                //"奖金",
                this.salaryObj.bonus=data.bonus;
                //"养老金比率",
                this.salaryObj.pensionPer=data.pensionPer;
                //"养老金基数",
                this.salaryObj.pensionBase=data.pensionBase;
                //"医疗保险比率",
                this.salaryObj.medicalPer=data.medicalPer;
                //"医疗保险基数",
                this.salaryObj.medicalBase=data.medicalBase;
                //"公积金比率",
                this.salaryObj.accumulationFundPer=data.accumulationFundPer;
                //"公积金基数"
                this.salaryObj.accumulationFundBase=data.accumulationFundBase;
                //账套名称
                this.salaryObj.name=data.name;
                this.salaryObj.id=data.id;

                this.dialogVisible=true;


            },
            // 删除
            deleteSalary(salary){
                this.$confirm("确认删除["+salary.name+"]账套?","提示",{
                    confirmButtonText:"确定",
                    cancelButtonText:"取消",
                }).then(()=>{
                    // 点击确认
                    this.deleteRequest("/salary/sob/"+salary.id).then(resp=>{
                        if(resp){
                            this.initSalaryList();
                        }
                    })
                }).catch(()=>{
                    this.$message.info("已取消删除!")
                })
            },
            lastStep(){
                // 当下标为0的时候;
                if(this.activeIndex==0){
                    this.dialogVisible=false;
                    return;
                }
                this.activeIndex--;
            },
            nextStep(){
                // 因为是11个步骤,所以当下标为10的时候结束;
                if(this.activeIndex==10){
                    console.log(this.addSalary);
                    //新增信息
                    this.addSalary();
                    return;
                }
              this.activeIndex++;
            },
            addSalary(){
                // id存在 修改
                if(this.salaryObj.id){
                    // 修改
                    this.putRequest("/salary/sob/",this.salaryObj).then(resp=>{
                        if(resp){
                            this.dialogVisible=false;
                            this.initSalaryList();
                        }
                    })
                }else{
                    // 新增
                    this.postRequest("/salary/sob/",this.salaryObj).then(resp=>{
                        if(resp){
                            this.dialogVisible=false;
                            this.initSalaryList();
                        }
                    })
                }

            },
            // 添加按钮dialog展示
            showAddSalaryView(){
                // 默认第一步显示
                this.activeIndex=0;
                this.dialogTitle="添加工资账套";
                this.dialogVisible=true;
                // 数值置空
                this.salaryObj={
                    //"基本工资",
                    "basicSalary":0,
                    //"交通补助",
                    "trafficSalary":0,
                    //"午餐补助",
                    "lunchSalary":0,
                    //"奖金",
                    "bonus":0,
                    //"养老金比率",
                    "pensionPer":0,
                    //"养老金基数",
                    "pensionBase":0,
                    //"医疗保险比率",
                    "medicalPer":0,
                    //"医疗保险基数",
                    "medicalBase":0,
                    //"公积金比率",
                    "accumulationFundPer":0,
                    //"公积金基数"
                    "accumulationFundBase":0,
                    //账套名称
                    "name":''
                }
            },
            initSalaryList(){
                this.getRequest("/salary/sob/").then(resp=>{
                    if(resp){
                        this.salaryList=resp.data;
                    }
                })
            }
        }

    }
</script>

<style>
    .addSalaryInput{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .addSalaryInput input{
        width: 200px;
    }
    .top-div{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
</style>